<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">详情</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view>
				<view class="increment_info_a">
					<view class="swiperbox">
						<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item v-for="(item,index) in goodsImageList" key="index">
								<image :src="item" mode="aspectFill">
								</image>
								{{ item.uri }}
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="goods-detail-container">
					<view class="price-section">
						<view class="price-tag">
							<text class="price">{{goodsDetail.price}}</text>
							<text class="currency">积分</text>
						</view>

						<view class="status-tags">
							<view class="tag-new" v-if="goodsDetail.isNew">NEW</view>
							<view class="tag-hot" v-if="goodsDetail.isPopular">HOT</view>
						</view>
					</view>

					<view class="info-section">
						<view class="transaction-type">{{goodsDetail.transactionType}}</view>
						<view class="goods-name">{{goodsDetail.name}}</view>
					</view>

					<view class="meta-section">
						<view class="meta-item">
							<image
								src="https://s1.aigei.com/prevfiles/cb7795a7bd674baa9fe259122c36919a.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:QA8hI1csRsxurtVW28W8SoNInHc="
								class="meta-icon"></image>
							<text>交易地点：{{goodsDetail.location || '暂无地点'}}</text>
						</view>

						<view class="meta-item">
							<image
								src="https://s1.aigei.com/src/img/png/db/dbd113667dfb4a7b92bfd3b7c5a902c3.png?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:BRDT55aPxBTEaxCLHw06s-CuwHI="
								class="meta-icon"></image>
							<text>浏览次数：{{goodsDetail.viewsCount || 0}}</text>
						</view>
					</view>
					<view class="seller-section">
						<image
							src="https://s1.chu0.com/prevfiles/8fb6bf5f9c844ad4a5e8b7613bcfaaac.png?e=2051020800&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:HGkyhMS1w7iTiGZEIJuWu0FvHJ8="
							class="seller-avatar"></image>
						<view class="seller-info">
							<view class="seller-name">{{goodsDetail.updateTime}}</view>
						</view>
					</view>
				</view>

				<view class="increment_info_d">
					<view class="increment_info_d_a">商品详情</view>
					<view class="increment_info_d_b">
						<u-parse :content="goodsDetail.description" :lazyLoad="true"></u-parse>
					</view>
				</view>
				<view style="width: 750rpx;height: 160rpx;"></view>
				<view class="service_info">
					<button open-type="share" class="service_info_a">
						<view class="service_info_a_aa">
							<u-icon name="share" color="#666666" size="20"></u-icon>
						</view>
						<view class="service_info_a_b">分享</view>
					</button>
					<view class="service_info_b">
						<view class="service_info_b_b" @tap="onConfirm()">立即购买</view>
					</view>
				</view>

				<u-popup :show="showPurchasePopup" mode="center" round="16" @close="closePurchasePopup">
					<view class="purchase-popup">
						<!-- 弹窗标题 -->
						<view class="popup-header">
							<text class="popup-title">填写购买信息</text>
							<u-icon name="close" size="20" color="#999" @click="closePurchasePopup"></u-icon>
						</view>

						<!-- 表单区域 -->
						<view class="popup-body">
							<view class="form-item">
								<text class="form-label">姓名</text>
								<u-input v-model="buyerInfo.name" placeholder="请输入您的姓名" border="bottom"
									clearable></u-input>
							</view>

							<view class="form-item">
								<text class="form-label">电话</text>
								<u-input v-model="buyerInfo.phone" placeholder="请输入联系电话" border="bottom" type="number"
									clearable></u-input>
							</view>
						</view>

						<!-- 按钮区域 -->
						<view class="popup-footer">
							<u-button plain hairline @click="closePurchasePopup" class="cancel-btn">取消</u-button>
							<u-button type="error" @click="submitPurchase" class="confirm-btn">确认购买</u-button>
						</view>
					</view>
				</u-popup>

			</view>
		</view>
	</view>
</template>
<script>
	import request from '@/common/request.js';
	import cnMoney from '@/components/cn-money/cn-money.vue';
	import storage from '@/common/storage.js';
	import {
		loadingType,
	} from '@/utils/type';
	import {
		vShow
	} from "vue";
	export default {
		components: {
			cnMoney
		},
		data() {
			return {
				showLoading: true,
				isNull: false,
				cart_num: 0,
				min_price: 0,
				goodsImageList: [],
				goodsDetail: '',
				commentList: [],
				commentList_count: 0,
				showSpec: false,
				checkedGoods: [],
				address_info: '',
				isGroup: 0,
				id: 4,
				sn: '',
				uid: '',
				distribution_code: '',
				isExchange: false,
				order_type: 1,
				showPurchasePopup: false, // 控制弹窗显示
				buyerInfo: {
					name: '',
					phone: ''
				}
			}
		},
		onLoad: function(options) {
			this.id = Number(options.id);
			console.log("得到的", id)
		},
		onShow() {
			this.uid = uni.getStorageSync('mid');

		},
		onShareAppMessage(res) {
			return {
				title: this.goodsDetail.name,
				path: '/pages/goodsdetail/goodsdetail?id=' + this.goodsDetail.id,
				imageUrl: request.baseUrl_img + this.goodsDetail.image,
				desc: this.goodsDetail.tags,
				content: this.goodsDetail.condition
			}
		},
		mounted() {
			this.findimglist()
		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
			async onConfirm(e) {
				console.log("点击了")
				this.showPurchasePopup = true
			},
			openPurchasePopup() {
				this.showPurchasePopup = true;
			},

			closePurchasePopup() {
				this.showPurchasePopup = false;
			},
			findimglist() {
				let paramsList = {

				}
				let optsList = {
					url: `api/goods/` + this.id,
					method: 'get'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						// _this.goodsImageList = res.data.data.images.imageUrl;
						_this.goodsImageList = res.data.data.images.map(item => {
							return request.baseUrl_img + item.imageUrl;
						});
						console.log("图片", res.data.data.goods)
						_this.goodsDetail = res.data.data.goods
						this.showLoading = false;
					}
				})
			},
			extractImageSources(content) {
				const regex = /<img\s+src="([^"]+)"/g;
				let matches;
				const srcArray = [];

				while ((matches = regex.exec(content)) !== null) {
					srcArray.push(matches[1]);
				}

				return srcArray;
			},
			submitPurchase() {
				if (!this.buyerInfo.name.trim()) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}

				if (!/^1[1-9]\d{9}$/.test(this.buyerInfo.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '订单生成ing'
				});
				let paramsList = {
					user_id: this.uid,
					goods_id: this.id,
					contact_name: this.buyerInfo.name,
					contact_phone: this.buyerInfo.phone,
				}
				let optsList = {
					url: 'api/booking/create',
					method: 'post'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						console.log("创建", res.data.data)
						uni.hideLoading();
						_this.buyerInfo = {
							name: '',
							phone: ''
						};
						_this.closePurchasePopup();
						uni.navigateTo({
							url: `/pages/sureorder/sureorder?id=` + res.data.data.id
						})
					} else {
						uni.hideLoading();
						_this.buyerInfo = {
							name: '',
							phone: ''
						};
						_this.closePurchasePopup();
						uni.showToast({
							title: "创建订单失败",
							icon: 'none'
						})
					}
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.service_info_a_aa {
		width: 20px;
		height: 20px;
		margin: auto;
	}

	.swiperbox {
		width: 750rpx;
		height: 750rpx;

		swiper {
			width: 750rpx;
			height: 750rpx;

			swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}

	.service_info_a_b {
		text-align: center;
		font-family: 思源黑体;
		font-size: 25rpx;
		line-height: 40rpx;
	}

	.goods_aa {
		width: 749rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 0 25rpx;
	}

	.goods_aa_a {
		padding: 50rpx 0 30rpx 0;
		overflow: hidden;
	}

	.goods_aa_a_a {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		float: left;
	}

	.goods_aa_a_a span {
		color: #666666;
	}

	.goods_aa_a_b {
		float: right;
		overflow: hidden;
	}

	.goods_aa_a_b_a {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #444444;
		float: left;
	}

	.goods_aa_a_b_b {
		float: left;
		margin-top: 8rpx;
		margin-left: 10rpx;
	}

	.goods_aa_b {
		overflow: hidden;
	}

	button::after {
		border: 0;
	}

	button {
		background-color: #FFFFFF;
		padding-left: 0;
		padding-right: 0;
	}

	.cart_num_a {
		width: 100rpx;
		height: 100rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 0rpx 5rpx 27rpx 0rpx rgba(86, 124, 46, 0.1);
		border-radius: 50%;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 40rpx;
	}

	.cart_num_a_a {
		width: 36rpx;
		height: 36rpx;
		background: #fffff;
		border-radius: 50%;
		border: #E71102 2rpx solid;
		position: absolute;
		top: -12rpx;
		right: -6rpx;
		text-align: center;
		line-height: 36rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #E71102;
	}

	.increment_info_a {
		width: 750rpx;
		height: 750rpx;
	}

	.increment_info_b {
		width: 720rpx;
		background: #FFFFFF;
		border-radius: 34rpx 34rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 25rpx;
	}

	.increment_info_b_b {
		width: 720rpx;
		height: 98rpx;
		font-size: 47rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		background: #FF3621;
		line-height: 98rpx;
		padding: 0 50rpx;
		overflow: hidden;
	}

	.index_b_d_b_a_b_b_a {
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		float: left;
	}

	.index_b_d_b_a_b_b_a_a {
		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		float: left;
	}

	.index_b_d_b_a_b_b_a_a span {
		font-size: 32rpx;
	}

	.increment_info_b_b_a {
		float: right;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
	}

	.increment_info_b_aa {
		padding: 25rpx;
		overflow: hidden;
	}

	.increment_info_b_a {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.increment_info_b_d {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 20rpx;
	}

	.increment_info_b_c {
		margin-top: 20rpx;
		overflow: hidden;
	}

	.increment_info_b_c_a {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: left;
		margin-right: 24rpx;
	}

	.increment_info_b_c_a span {
		color: #E71102;
		padding: 0 15rpx;
	}

	.increment_info_b_c_b {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111526;
		float: right;
		background-position: left;
		background-repeat: no-repeat;
		background-size: 30rpx 23rpx;
		padding-left: 40rpx;
	}

	.increment_info_c {
		width: 720rpx;
		height: auto;
		margin: auto;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 50rpx 25rpx;
	}

	.increment_info_c_a {
		height: 80rpx;
		line-height: 80rpx;
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: right;
		padding-right: 50rpx;
		margin-top: 50rpx;
	}

	.increment_info_c_a_a {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		float: left;
	}

	.increment_info_c_a_b {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		float: left;
		margin-left: 25rpx;
		width: 400rpx;
		height: 80rpx;
		overflow: hidden;
	}

	.increment_info_c_a_b_a_a {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		float: left;
		margin-right: 20rpx;
		overflow: hidden;
	}

	.increment_info_c_a_b_a_a image {
		width: 80rpx;
		height: 80rpx;
	}

	.increment_info_c_a_b_a_b {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		float: left;
		margin-right: 20rpx;
		line-height: 80rpx;
	}

	.increment_info_c_a_c {
		width: 520rpx;
		height: 80rpx;
		float: left;
		margin-left: 25rpx;
		overflow: hidden;
	}

	.increment_info_c_a_c_a {
		width: 28%;
		float: left;
		margin-right: 20rpx;
	}

	.increment_info_c_a_c_a_a {
		width: 100%;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 45rpx;
	}

	.increment_info_c_a_c_a_b {
		width: 100%;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 45rpx;
	}

	.increment_info_c_a_d {
		width: 120rpx;
		height: 80rpx;
		background: #EEEEEE;
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: left;
	}


	.increment_info_d {
		background: #FFFFFF;
		width: 750rpx;
		height: auto;
		overflow: hidden;
		margin-top: 20rpx;
		padding-bottom: 40rpx;
	}

	.increment_info_d_a {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		height: 140rpx;
		line-height: 140rpx;
		text-align: left;
		margin-left: 40rpx;
	}

	.increment_info_d_b {
		padding: 30rpx;
		overflow: hidden;
	}

	.service_info {
		width: 750rpx;
		height: 150rpx;
		background: #FFFFFF;
		border: 1px solid #F2F2F2;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		padding: 16rpx 28rpx;
		position: fixed;
		bottom: 0;
	}

	.service_info_a {
		height: 80rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		background-position: center 0rpx;
		background-repeat: no-repeat;
		background-size: 50rpx;
		line-height: 130rpx;
		float: left;
		width: 80rpx;
		text-align: center;
		position: relative;
	}

	.service_info_a_a {
		width: 34rpx;
		height: 34rpx;
		background: linear-gradient(0deg, #E71102, #E71102);
		border-radius: 17rpx;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 34rpx;
	}

	.service_info_aa {
		color: #E71102;
	}

	.service_info_aaa {
		background-size: 45rpx;
	}

	.service_info_b {
		width: 400rpx;
		height: 88rpx;
		background: #FFFFFF;

		float: right;
		overflow: hidden;
	}

	.service_info_b_a {
		width: 52%;
		height: 88rpx;
		line-height: 80rpx;

		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		background-color: #FF9727;
		text-align: center;
		line-height: 78rpx;
		float: left;
		border-radius: 44rpx;
	}

	.service_info_b_b {
		width: 44%;
		height: 88rpx;
		line-height: 80rpx;

		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		text-align: center;
		line-height: 78rpx;
		float: left;
		background-color: #E71102;
		border-radius: 44rpx;
		float: right;
	}

	.details-null {
		padding-top: 140rpx;
		margin-bottom: 100rpx;
	}

	.column-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.img-null {
		width: 300rpx;
		height: 300rpx;
	}

	// --------------------
	/* 商品详情页样式 */
	.goods-detail-container {
		padding: 24rpx;
		background: #fff;
	}

	/* 价格区域 */
	.price-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.price-tag {
		display: flex;
		align-items: baseline;
	}

	.price {
		font-size: 48rpx;
		font-weight: bold;
		color: #ff4d4f;
	}

	.currency {
		font-size: 28rpx;
		color: #ff4d4f;
		margin-left: 8rpx;
	}

	/* 状态标签 */
	.status-tags {
		display: flex;
		gap: 12rpx;
	}

	.tag-new,
	.tag-hot {
		font-size: 22rpx;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		font-weight: bold;
		color: white;
	}

	.tag-new {
		background: linear-gradient(135deg, #6e8efb, #a777e3);
	}

	.tag-hot {
		background: linear-gradient(135deg, #ff7676, #f54ea2);
	}

	/* 商品信息 */
	.info-section {
		margin-bottom: 40rpx;
	}

	.transaction-type {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 12rpx;
	}

	.goods-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
	}

	/* 元信息 */
	.meta-section {
		background: #f8f8f8;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}

	.meta-item {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		padding: 12rpx 0;
	}

	.meta-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	/* 卖家信息 */
	.seller-section {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-top: 1rpx solid #eee;
	}

	.seller-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.seller-info {
		flex: 1;
	}

	.seller-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 6rpx;
	}

	.seller-credit {
		font-size: 24rpx;
		color: #ffb400;
	}

	// 订单
	.purchase-popup {
		width: 600rpx;
		padding: 40rpx;
		background: #fff;
		border-radius: 16rpx;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.popup-body {
		margin-bottom: 40rpx;
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.popup-footer {
		display: flex;
		justify-content: space-between;
	}

	.cancel-btn {
		width: 48%;
		border-color: #ccc;
		color: #666;
	}

	.confirm-btn {
		width: 48%;
	}

	// 大改
	/deep/ .u-input {
		padding-left: 0 !important;
	}

	/deep/ .u-input__input {
		font-size: 28rpx !important;
	}
</style>